<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app" v-cloak>
        <div>
            <ul>
                <li v-for="i,index in list">
                    <div v-if="i.num-i.buyNum>=0">
                        <div>{{i.name}}</div>
                        <div>价格{{i.price}}</div>
                        <div><img v-bind:src="i.imgas" width="100" alt=""></div>
                        <div>数量{{i.num-i.buyNum}}</div>
                        <div><input @input="input(i.buyNum,i.price,index)" type="number" min="0" v-model="i.buyNum">
                        </div>
                        <button @click="add(list,index)">新增</button>
                        <button @click="del(list,index)">删除</button>
                    </div>
                    <div v-else>null</div>
                </li>
            </ul>
            <div>总金额{{totalMoney}}</div>
        </div>
    </div>
</body>
<style>
    [v-cloak] {
        display: none;
    }

    /* li{
        list-style: none;
    } */
</style>
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
<script>
    //  #### 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示
    // 作业：继续商品列表,加个 新增和删除的按钮,新增点击后，会自动加上最后一个商品.删除点击后，会自动减去最后一个商品
    //#### 作业：在上一次基础上，加入监听器和计算属性，用计算属性来计算购买的总价，用监听器来控制购买的数量，如果超出了总数给出提示,不能再加数量了.
    let app = Vue.createApp({
        data: () => {
            return {
                list: [
                    {
                        name: 'scenery',
                        price: 100,
                        imgas: 'https://img0.baidu.com/it/u=606944329,1526388717&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
                        num: 100,
                        buyNum: null,
                        totalPrice: 0
                    },
                    {
                        name: 'scenery2',
                        price: 200,
                        imgas: 'https://img0.baidu.com/it/u=606944329,1526388717&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
                        num: 100,
                        buyNum: null,
                        totalPrice: 0
                    },
                    {
                        name: 'scenery3',
                        price: 300,
                        imgas: 'https://img0.baidu.com/it/u=606944329,1526388717&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
                        num: 100,
                        buyNum: null,
                        totalPrice: 0
                    },
                    {
                        name: 'scenery4',
                        price: 400,
                        imgas: 'https://img0.baidu.com/it/u=606944329,1526388717&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
                        num: 100,
                        buyNum: null,
                        totalPrice: 0
                    },
                ],
                priceNum: {
                    price: 0
                }

            }
        },
        methods: { //存放一些方法，methods中的方案，可以在模板中被访问到
            add: function (list, index) {
                //console.log(i)
                console.log(list.push(list[index]))
            },
            del: function (list, index) {
                console.log(list.splice(index, 1))
            },
            input: function (buyNum, price, index) {
                return this.list[index].totalPrice = buyNum * price
            }
        },
        computed: {
            totalMoney() {
                var priceNum = 0;
                for (var i = 0; i < this.list.length; i++) {
                    priceNum += this.list[i].totalPrice
                }
                return this.priceNum.price = priceNum
            }
        },
        watch: {
            list: {
                handler(newValue, oldValue) {
                    for(const index in newValue){
                        if(newValue[index].buyNum>=100){
                        newValue[index].buyNum=newValue[index].num
                    }
                    }
                },
                deep: true
            }
        }
    }).mount('#app')

</script>

</html>